<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">
  
  <head>
    
    <%@ include file="/WEB-INF/include/meta.jsp"%>
    <%@ include file="/WEB-INF/include/css.jsp"%>
    <title>今日任务</title>
  </head>
  <!-- end header -->
  <body>
    <div class="page-group">
      <div class="page page-current bg-light-gray">
        <nav class="bar bar-tab punch-card-bar">
          <a class="tab-item external active" href="${ctx.host}/courses/${batchCourseware.monthly.id}/batches/${batchCourseware.id}/units">
            <span class="icon icon-today"></span>
            <span class="tab-label">今日</span>
          </a>
          <a class="tab-item external" href="${ctx.host}/courses">
            <span class="icon icon-lesson"></span>
            <span class="tab-label">课程</span>
          </a>
          <a class="tab-item external" href="${ctx.host}/profile">
            <span class="icon icon-profile"></span>
            <span class="tab-label">我的</span>
          </a>
        </nav>

        <div class="content">
          <div class="task-banner">
            <img src="${ctx.resource}/image/task.png" class="task-banner">
            <c:if test="${not empty record}">
              <div class="finish status-label">已打卡</div>
            </c:if>
          </div>
          <div class="card unit-course">
            <div class="appoint-title text-center"><span style="font-size: .95rem;">${dailyCourseware.template.name}</span></div>
            <div class="text-center">${dailyCourseware.template.actionAmount}个动作</div>
            <img src="${ctx.resource}/image/clock.png" class="clock-cover">
            <p class="text-center time">预计${dailyCourseware.template.minutes}分钟</p>
            <a href="javascript:void(0);" class="button ft-market-btn ft-button-yellow button-fill start-task-btn">${empty record ? '开始运动' : '查看详情'} <span class="arrows-right"></span></a>
          </div>
        </div>
        
      </div>
    </div>
    
    <%@ include file="/WEB-INF/include/script.jsp"%>
    <d:resource root="${ctx.resource}/build" type="script" src="js/page/course/unit/unit-index.js" />
    <script type="text/javascript">
      require(['page/course/unit/unit-index'], function(page) {
        page.init({
        	"batchId" : "${batchCourseware.id}",
        	"dailyId" : "${dailyCourseware.id}",
        	"isSignin" : "${not empty record}",
        	"monthlyId" : "${batchCourseware.monthly.id}"
        })
      })
    </script>
  </body>
</html>